@extends('layouts.index')

@section('content')

<div class="flex items-center">
    <div class="ml-4 text-lg leading-7 font-semibold">
        <a href="/questions/create">测试试题</a>
    </div>
</div>

<div style="padding: 0 50px">
    <div>{{ \Session::get('message')}}</div>
    <div class="mt-2 text-gray-600 dark:text-gray-400 text-sm">
        <div class="question-jump">
            <div><a href="{{$prev}}"><< 上一题</a></div>
            <div><a href="{{$next}}">下一题 >></a></div>
        </div>
        @empty($question)
        <p style="font-size: 24px;text-align: center;">
            没找到，去<a href="{{route('questions.create')}}" style="color: #0032e6;">创建</a>
        </p>
        @else
        <div id="question-content">
            <p>
                {{$question['number']}}
            </p>
            <pre>{{$question['title']}}</pre>
            <pre>{{$question['options']}}</pre>
            <p style="color: #fff">
                {{$question['answer']}}
            </p>
        </div>
        @endempty
        <div class="trans"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    document.addEventListener("dblclick", doubleClick, true);
    document.addEventListener("mouseup", doubleClick, true);
    document.addEventListener("selectionchange", doubleClick, true);

    var w = 0;
    
    function doubleClick() {
        w ++;
        var text = "";
        if (window.getSelection) {
            text = window.getSelection().toString();
        } else if (document.selection && document.selection.type != "Control") {
            text = document.selection.createRange().text;
        }
        if ("" != text && text.length > 1 && w < 2) {
            w = text;
            $.getJSON('/words/trans?word=' + text, function (json) {
                w = 0;
                $('.trans').html(json.trans);
            });
        } else {
            w = 0;
        }
    }
})
</script>

@stop